<template>
  <div class="itempanel_tools">
    <div class="itempanel_tools_box">
      <div class="itempanel_tools_left">
        <ul>
          <li>
            <GoodButton :item="item"></GoodButton>
          </li>
          <li>
            <a
              href="javascript:;"
              class="icon itempanel_tools_comment"
              :class="isComment ? 'on' : ''"
              @click="commentClickHandle"
              :title="this.$t('lang.评论')"
            >
              <span class="icon-comment"></span>
            </a>
          </li>
          <li>
            <a
              href="javascript:;"
              class="icon itempanel_tools_forward"
              @click="forwardClickHandle"
              :title="this.$t('lang.转发')"
            >
              <span class="icon-share"></span>
            </a>
          </li>
          <li><slot name="itempanelToolsLeftCustom"></slot></li>
        </ul>
      </div>
      <div class="itempanel_tools_right">
        <ul>
          <li>
            <CollectionButton :item="item"></CollectionButton>
          </li>
        </ul>
      </div>
    </div>
    <div class="currentuser_comment" v-if="isComment">
      <!-- <div class="currentuser_comment_user">
        <ItemImgHead :item="item.currentUser"></ItemImgHead>
        <span class="currentuser_comment_user_name">{{
          item.currentUser.nickName
        }}</span>
      </div> -->
      <div class="currentuser_comment_input">
        <input
          type="text"
          value=""
          :placeholder="$t('lang.添加更多评论')"
          @keyup.enter="addComment"
          v-model="currentUserComment"
        />
      </div>
    </div>
    <div class="itempanel_tools_aside">
      <router-link
        :to="{
          name: 'GOOD',
          params: { contentid: item.contentId, usid: item.userId },
        }"
        ><b class="itempanel_tools_aside_goodcount">{{
          $t("lang.次赞", { g: item.goodCount })
        }}</b></router-link
      >
      <p class="itempanel_tools_aside_desc">
        <router-link
          :to="{ name: 'USER', params: { usid: item.userId } }"
          class="itempanel_tools_aside_comment_user"
          >{{ item.nickName }}</router-link
        >{{ item.content[0].desc }}
      </p>
      <p class="itempanel_tools_aside_tags">
        <router-link
          :to="{ name: 'TAGS', params: { v: sitem } }"
          v-for="(sitem, sindex) in item.tags"
          :key="'tags_' + sindex"
          ><i class="icon-uniE950"></i>{{ sitem }}</router-link
        >
      </p>
      <b class="itempanel_tools_aside_commentcount">{{
        $t("lang.条评论", { g: item.comments.count })
      }}</b>
      <ul>
        <li
          v-for="(comment, cindex) in item.comments.list"
          :key="'comment_' + cindex"
        >
          <router-link
            :to="{ name: 'USER', params: { usid: comment.userId } }"
            class="itempanel_tools_aside_comment_user"
            >{{ comment.nickName }}</router-link
          ><span>{{ comment.content }}</span>
          <GoodButton :item="comment"></GoodButton>
        </li>
      </ul>
      <a href="javascript:;" class="itempanel_tools_aside_translation">{{
        $t("lang.查看翻译")
      }}</a>
      <router-link
        :to="{
          name: 'MORECOMMENTS',
          params: { contentid: item.contentId, usid: item.userId },
        }"
        class="itempanel_tools_aside_morecomments"
        >{{ $t('lang["更多"]') }}</router-link
      >
    </div>
    <p class="itempanel_tools_date">
      {{ getTimeFormate(item.lastTime) }}{{ $t('lang["发布"]') }}
    </p>
    <!-- <Dialog :isShow="isShow" type="center">
      <div class="itempanel_tools_dialog">
        <div class="itempanel_tools_dialog_header">
          {{ $t('lang["转发消息"]') }}
        </div>
        <div class="itempanel_tools_dialog_content"></div>
        <div class="itempanel_tools_dialog_buttons">
          <a
            href="javascript:;"
            @click="cancelClickHandle"
            class="itempanel_tools_dialog_buttons_cancel"
            >{{ $t('lang["取消"]') }}</a
          >
          <a
            href="javascript:;"
            @click="enterClickHandle"
            class="itempanel_tools_dialog_buttons_enter"
            >{{ $t('lang["发送"]') }}</a
          >
        </div>
      </div>
    </Dialog> -->
    <van-action-sheet
      v-model="isShow"
      :title="this.$t('lang.转发给好友')"
      :cancel-text="this.$t('lang.取消')"
    >
      <div class="content">
        <ShareContent
          :item="item"
          @closeDialog="cancelClickHandle"
        ></ShareContent>
      </div>
    </van-action-sheet>
  </div>
</template>
<script>
export default {
  name: "ItemPanelTools",
  components: {
    ItemImgHead: () =>
      import(
        /* webpackChunkName: "itemImgHead" */ "../../../components/common/itemImgHead"
      ),
    Dialog: () =>
      import(
        /* webpackChunkName: "dialog" */ "../../../components/common/dialog"
      ),
    GoodButton: () =>
      import(
        /* webpackChunkName:"goodButton" */ "../../../components/common/goodButton"
      ),
    ShareContent: () =>
      import(
        /* webpackChunkName:"shareContent" */ "../../../components/common/shareContent"
      ),
    CollectionButton: () =>
      import(
        /* webpackChunkName:"collectionButton" */ "../../../components/common/collectionButton.vue"
      ),
  },
  props: {
    item: {
      type: Object,
      default() {
        return {
          goodCount: 0,
          comments: [],
        };
      },
    },
  },
  data() {
    return {
      currentUserComment: "",
      isComment: false,
      isShow: false,
      isCollection: false,
    };
  },
  watch: {
    currentUserComment(v) {},
  },
  methods: {
    getTimeFormate(v) {
      return this.getDateDiff(v, "yyyy-MM-dd", this.$t);
    },
    commentClickHandle(e) {
      if (this.isComment) {
        this.isComment = false;
      } else {
        this.isComment = true;
      }
    },
    forwardClickHandle(e) {
      this.isShow = true;
    },
    addComment(e) {},
    enterClickHandle(e) {},
    cancelClickHandle(e) {
      this.isShow = false;
    },
    commentGoodClickHandle() {},
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.itempanel_tools {
  .itempanel_tools_box {
    display: flex;
    padding: 10 / @base;
    font-size: 24 / @base;
    .itempanel_tools_left {
      width: 80%;
      ul {
        li {
          float: left;
          a {
            &.icon {
              margin: 0 20 / @base 0 0;
              &.on {
                color: rgb(165, 42, 42);
              }
            }
          }
        }
      }
    }
    .itempanel_tools_right {
      width: 20%;
      ul {
        li {
          float: right;
          a {
            &.icon {
              &.on {
                color: rgb(165, 42, 42);
              }
            }
          }
        }
      }
    }
  }
  .itempanel_tools_aside {
    padding: 10 / @base;
    p {
      &.itempanel_tools_aside_desc {
        word-wrap: break-word;
        margin: 0 0 10 / @base 0;
      }
      &.itempanel_tools_aside_tags {
        padding: 0 0 10 / @base 0;
        a {
          display: inline-block;
          margin: 5 / @base 5 / @base 0 0;
          border: 1 / @base solid #efefef;
          border-radius: 30 / @base;
          padding: 2 / @base 5 / @base;
          background-color: #efefef;
          i {
            border: 1 / @base solid #ccc;
            border-radius: 30 / @base;
            margin: 0 5 / @base 0 0;
            background-color: #fff;
            vertical-align: middle;
          }
        }
      }
    }
    b {
      &.itempanel_tools_aside_goodcount {
        font-size: 12 / @base;
      }
      &.itempanel_tools_aside_commentcount {
        font-size: 10 / @base;
        color: #999;
        font-weight: 400;
      }
    }
    a {
      &.itempanel_tools_aside_comment_user {
        margin: 0 10 / @base 0 0;
        font-weight: 700;
      }
      &.itempanel_tools_aside_morecomments {
        font-size: 10 / @base;
        margin-left: 10 / @base;
        border-left: 1 / @base solid #ccc;
        padding-left: 10 / @base;
      }
      &.itempanel_tools_aside_translation {
        font-size: 10 / @base;
      }
    }
    ul {
      margin: 0 0 5 / @base 0;
      li {
        word-wrap: break-word;
        margin: 5 / @base 0;
        span {
          margin: 0 10 / @base 0 0;
        }
        b {
          margin: 0 10 / @base 0 0;
        }
      }
    }
  }
  p {
    &.itempanel_tools_date {
      padding: 0 10 / @base 10 / @base;
      font-size: 10 / @base;
      color: #999;
    }
  }
  .currentuser_comment {
    display: flex;
    margin: 0 10 / @base;
    .currentuser_comment_user {
      display: flex;
      width: 50 / @base;
      .itempanel_header {
        width: 32 / @base;
      }
      .currentuser_comment_user_name {
        line-height: 32 / @base;
        margin: 0 0 0 10 / @base;
      }
    }
    .currentuser_comment_input {
      input {
        height: 32 / @base;
        line-height: 32 / @base;
        width: 330 / @base;
        border: 1 / @base solid #ccc;
        padding: 0 10 / @base;
      }
    }
  }
  .itempanel_tools_dialog {
    width: 300 / @base;
    border-radius: 5 / @base;
    background-color: #fff;
    height: 400 / @base;
    margin: 0 auto;
    overflow: hidden;
    .itempanel_tools_dialog_header {
      height: 40 / @base;
      line-height: 40 / @base;
      padding: 0 10 / @base;
      border-bottom: 1 / @base solid #efefef;
    }
    .itempanel_tools_dialog_content {
      height: 320 / @base;
      border-bottom: 1 / @base solid #efefef;
      overflow: scroll;
    }
    .itempanel_tools_dialog_buttons {
      display: flex;
      text-align: center;
      .itempanel_tools_dialog_buttons_cancel {
        width: 50%;
        height: 40 / @base;
        background-color: #ccc;
        line-height: 40 / @base;
      }
      .itempanel_tools_dialog_buttons_enter {
        width: 50%;
        height: 40 / @base;
        background-color: rgb(165, 42, 42);
        color: #fff;
        line-height: 40 / @base;
      }
    }
  }
  .content {
    height: 400 / @base;
  }
}
</style>
